<template>
<a-config-provider :locale="zhCN">
    <!-- <template v-for="(borrower,i) in borrowers" :key="i">
        {{ borrower }}
    </template> -->
    <!-- <a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd">添加借阅人</a-button> -->
    <a-button class="editable-add-btn" type="primary" @click="modal2Visible = true">
      添加借阅人
    </a-button>
    <a-modal
      v-model:visible="modal2Visible"
      title="添加借阅人"
      centered
      ok-text="确认"
      cancel-text="取消"
      @ok="handAddBorrower"
    >
        <!-- <p>新增</p> -->
        <a-input v-model:value="borrower_name" placeholder="输入新增人名"></a-input>
    </a-modal>
    <a-table 
        bordered 
        :data-source="borrowers" 
        :columns="columns" 
        size="small" 
        class="ant-table-striped" 
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)" 
        :loading="loading"
        :pagination="{ showSizeChanger: true, showTotal: total => `共${total}条` }"
        :scroll="{ y: 700 }"
    >
        <template #bodyCell="{ column, text, record }">
            <template v-if="column.dataIndex === 'person_valid'">
                <template v-if="text === 0"><a-tag color="volcano">离职</a-tag></template>
                <template v-else><a-tag color="green">在职</a-tag></template>
            </template>
            <template v-if="column.dataIndex === 'creation_ts'">
                {{ text.substr(0,4) }}-{{ text.substr(4,2) }}-{{ text.substr(6,2) }} {{ text.substr(8,2) }}:{{ text.substr(10,2) }}:{{ text.substr(12) }}
            </template>
            <template v-else-if="column.dataIndex === 'operation'">
                <p v-if="record.person_valid == 0" style="display:inline;">
                    <a-popconfirm
                    title="确定操作入职吗?"
                    @confirm="onUpdateBorrowerValid(record.id)"
                    ok-text="确认"
                    cancel-text="取消"
                    >
                        <a>入职</a>
                    </a-popconfirm>
                    &nbsp;
                    <a-popconfirm
                    title="确定操作去职吗?"
                    @confirm="onUpdateBorrowerValid(record.id)"
                    disabled
                    >
                        <a disabled>去职</a>
                    </a-popconfirm>
                </p>
                <p v-else-if="record.person_valid != 0" style="display:inline;">
                    <a-popconfirm
                    title="确定操作入职吗?"
                    @confirm="onUpdateBorrowerValid(record.id)"
                    disabled
                    >
                        <a disabled>入职</a>
                    </a-popconfirm>
                    &nbsp;
                    <a-popconfirm
                    title="确定操作去职吗?"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="onUpdateBorrowerValid(record.id)"
                    >
                        <a>去职</a>
                    </a-popconfirm>
                </p>
            </template>
        </template>
    </a-table>
</a-config-provider>
</template>

<script>
import { message } from "ant-design-vue";
import axios from "axios";
import { defineComponent, onMounted,ref } from "vue";
import zhCN from 'ant-design-vue/es/locale/zh_CN';

export default defineComponent(
    {
        name:'Borrowers',
        setup(){
            const loading = ref(true);
            const total = ref(0)
            const modal2Visible = ref(false);
            const borrower_name = ref();
            const columns = [
                {
                    title:'id',
                    dataIndex:'id',
                    width:'10%',
                },
                {
                    title:'借阅人',
                    dataIndex:'person_name',
                },
                {
                    title:'借阅人状态',
                    dataIndex:'person_valid',
                    filters:[
                        {text:'在职',value:'1'},
                        {text:'离职',value:'0'},
                    ],
                    filterSearch:false,
                    onFilter:(value,record) => record.person_valid.toString().indexOf(value) === 0
                },
                {
                    title:'录入时间',
                    dataIndex:'creation_ts',
                },
                {
                    title:'操作',
                    dataIndex:'operation',
                }
            ];
            const borrowers = ref([]);
            const handAddBorrower = () => {
                // todo
                if (! borrower_name.value){
                    return message.error("请输入新添加人员名称,不可为空")
                }
                loading.value = true;
                axios.post('/re/addBorrower',{person_name:borrower_name.value})
                .then( async (response) => {
                    const resp = await axios.post('/re/queryAllBorrowers')
                    borrowers.value = resp.data.content
                    total.value = borrowers.value.length
                    loading.value = false;
                    borrower_name.value = null;
                    return message.success(response.data.content)
                    }
                )
                modal2Visible.value = false
            }
            const onUpdateBorrowerValid = key => {
                loading.value = true;
                axios.post('/re/updateBorrowerValid',{person_id:key})
                .then(
                    async (response) => {
                        const resp = await axios.post('/re/queryAllBorrowers')
                        borrowers.value = resp.data.content;
                        total.value = borrowers.value.length
                        loading.value = false;
                        if (response.data.result === 'success'){
                            return message.success(response.data.content)
                        }else if (response.data.result === 'failure'){
                            return message.error(response.data.content)
                        }
                    }
                )
            }
            onMounted(async () => {
                const resp = await axios.post('/re/queryAllBorrowers')
                borrowers.value = resp.data.content
                total.value = borrowers.value.length
                loading.value = false;
            })
            return {
                zhCN,
                loading,
                total,
                columns,
                borrowers,
                modal2Visible,
                borrower_name,
                handAddBorrower,
                onUpdateBorrowerValid,
            }
        }
    }
)
</script>

<style scoped>
.editable-add-btn {
    margin-bottom: 8px;
    float: right;
    margin-right:15px;
  }
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
.ant-table-striped {
    margin:15px;
}
</style>